<template>
	<view class="container">
		<view class="my-tam-header" >
			<image :src="shopData['shop_avatar']" mode="widthFix" class="store-bg"></image> 
			<view class="store-bg-hidden">
				
			</view>
			<view class="top-bar">
				<view class="navbar" @tap="back">
					<image class="white-arrow-left"
						src="">
					</image>
					<view class="nav-title" style="color: rgb(255, 255, 255);">店铺详情</view>
		
				</view>
			</view>
			

	
		</view>
		<view class="tui-content-box">
			<view class="tui-box tui-order-box tui-tool-box">
				<view class="store-header">
					<view class="store-avatar">
						<image :src="shopData['shop_avatar']" class="store-avatar-img"></image>
					</view>
					<view class="store-name">
						<view class="store-store-name">{{shopData['shop_name']}}</view>
						<view class="store-store-des">{{shopData['shop_description']}}</view>
						<view class="tag">
							
							<text>消费反馈{{shopData.give_point_proportion}}</text>

						</view>
					</view>
				</view>
				<view class="store-box">
				     营业时间:{{shopData['shop_workingtime']}}
				</view>	
				<view class="store-address" @tap="location">
				     <view class="store-box-address">地址:{{shopData['shop_address']}}</view>
					 <view class="item-locat-info">
					 	<image src="/static/images/common/location.png" mode="widthFix" class="item-locat-info-icon"></image>
					 	<text class="item-locat-info-km">据您:{{shopData.distance}}</text>
					 </view>
				</view>	
			</view>
			
		</view>
		<view class="tui-content-boxs">
			<view class="tui-box tui-order-box tui-tool-box">
				<view class="tui-cart-cell  tui-mtop" v-for="(item,index) in productList" :key="index" @click="detail(item.goods_id)">
					
							<view class="tui-goods-item">
								
								<image :src="item.pic_cover_mid" class="tui-goods-img" />
								<view class="tui-goods-info">
									<view class="tui-goods-title">
										{{item.goods_name}}
									</view>
									<view class="tui-goods-desc">
										{{item.introduction}}
									</view>
			
									<view class="tui-price-box">
										<view class="tui-goods-price">￥{{item.promotion_price}}</view>
										<view class="tui-goods-stock">库存:{{item.stock}}/{{item.goods_unit}}</view>
									</view>
									<view class="tui-product-btn">
										获赠{{item.give_xfmoney}}分润值
									</view>
								</view>
							</view>
					
				</view>
			</view>
			
		</view>
	
	</view>
</template>
<script>
export default {
	data() {
		return {
			current: 0,
			
			productList: [],
			banner: [],
			pageIndex: 1,
			loadding: false,
			pullUpOn: true,
			shopData:'',
			shopOrder:'',
			storeData:'',
			shop_id:0,
			latitude:'',
			longitude:'',
		};
	},
	onLoad(options){
	  if(options.shop_id){
		this.shop_id=options.shop_id;
	  }	
	},
	onShow() {
	    if(this.tui.authlogin()){
		   
		   this.maps();
	    }
	},
	methods: {
		maps(){
			uni.getLocation({
				type:'gcj02',
			    success: (res) => {
					let _this=this;
			        let latitude,longitude;
			        latitude = res.latitude.toString();
			        longitude = res.longitude.toString();
					this.longitude=longitude;
					this.latitude=latitude;
					this.init();
			    },
			    fail: (err) => {
			        if (err.errMsg.indexOf("auth deny") >= 0) {
						this.tui.toast("访问位置被拒绝");
			        } else {
						this.tui.toast(err.errMsg);
			        }
			        
			    }
			})
		},
		init(){
			let token = this.tui.getToken();
			let datas={
				token: token,
				shop_id:this.shop_id,
				latitude_longitude:this.latitude+","+this.longitude
			};
			let result=this.tui.request('shop','post',datas,1000,1,'','peripheralDetail');
			Promise.resolve(result).then((value)=>{
			   if(value.code==200){
				   if(!value.data){
				   	 this.back();
				   }
			   	this.shopData=value.data;
				
			   }
			})
			this.pageIndex=1;
			let data = {
				token: token,
				shop_id: this.shop_id,
				page:this.pageIndex
			};
			let goodslist = this.tui.request('shop', 'post', data, 1000, 1, '', 'goodsList');
			Promise.resolve(goodslist).then((value) => {
				if (value.code == 200) {
					this.productList = value.data.data;
				}
			})
		},
		detail: function(goods_id) {
			uni.navigateTo({
				url: '/pages/productDetail/productDetail?goods_id='+goods_id
			});
		},
		coupon() {
			uni.navigateTo({
				url: '../coupon/coupon'
			});
		},
		initNavigation(e) {
			this.opacity = e.opacity;
			this.top = e.top;
		},
		opacityChange(e) {
			this.opacity = e.opacity;
		},
		classify: function() {
			uni.navigateTo({
				url: '../classify/classify'
			});
		},
		more: function(e) {
			let key = e.currentTarget.dataset.key || '';
			uni.navigateTo({
				url: '../productList/productList?searchKey=' + key
			});
		},
		categorys: function(e) {
			uni.navigateTo({
				url: '../productList/productList?category_id=' + e
			});
		},
		search: function() {
			uni.navigateTo({
				url: '../search/search'
			});
		},
		back(){
			uni.switchTab({
				url: '/pages/my/my'
			})
		},
		href(page) {
			let url = "";
			switch (page) {
				case 1:
					url = "/pageschild/shop/shopOrder"
					break;
				case 2:
					url = ""
					break;
				case 3:
					url = ""
					break;
				case 4:
					url = "/pageschild/shop/setting"
					break;
				case 5:
					url = ""
					break;
				case 6:
					url = "/pageschild/shop/merchants"
					break;
				case 7:
					url = "/pageschild/shop/addGoods"
					break;
				case 8:
					url = "/pageschild/shop/goodsList"
					break;
				default:
					break;
			}
		
			if (url) {
				// #ifdef MP-WEIXIN
				if (page == 10) {
					this.tui.toast("请在公众号板块使用~");
					return;
				}
				// #endif
		
				uni.navigateTo({
					url: url
				})
			} else {
				this.tui.toast("功能尚未完善~")
			}
		},
		location: function() {
			uni.openLocation({
				longitude: Number(this.shopData.latitude),
				latitude: Number(this.shopData.longitude),
				name: this.shopData.shop_name,
				address: this.shopData.address
			})
		},
	},
	onReachBottom: function() {
		this.loadding = true;
				
			let token = this.tui.getToken();
			let data = {
				token: token,
				page:this.pageIndex
			};
			let goodslist = this.tui.request('shop', 'post', data, 1000, 1, '', 'goodsList');
			Promise.resolve(goodslist).then((value) => {
				if (value.code == 200) {
					this.productList = this.productList.concat(value.data.data);
					this.loadding = false
				}
			})
			this.pageIndex = this.pageIndex + 1;
			this.loadding = false
	}
};
</script>
<style>
page {
	background-color: #f7f7f7;
}
.container {
	padding-bottom: 100rpx;
	color: #333;
}
.my-tam-header {
		border-bottom-left-radius: 4rpx;
		border-bottom-right-radius: 4rpx;
		height: 360rpx;
		overflow: hidden;
		
		position: relative;
		
	}
	.store-bg-hidden{
		top:0rpx;position: absolute;left:0rpx;
		width: 100%;
		height: 360rpx;
		backdrop-filter: blur(6px);
	}
	/* #ifdef APP-PLUS*/
	.top-bar {
		position: absolute;
		top: 40rpx;
		left: 0;
		width: 100%;
		z-index: 99;
	}
	
	/* #endif */
	/* #ifndef APP-PLUS */
	.top-bar {
		position: absolute;
		top: 0rpx;
		left: 0;
		width: 100%;
		z-index: 99;
	}
	
	/* #endif */
	.navbar {
		height: 44px;
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		position: relative;
	}
	.white-arrow-left {
		width: 8px;
		height: 16px;
		margin-left: 17px;
	}
/*tabbar*/
.tui-tabbar {
	width: 100%;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 99999;
	background: #fff;
	height: 100rpx;
	left: 0;
	bottom: 0;
	padding-bottom: env(safe-area-inset-bottom);
}
.store-bg{
	width:100%;
	height: 360rpx;
	overflow: hidden;
	background-size: 100%;
	-webkit-backdrop-filter: blur(30px);
	 backdrop-filter: blur(30px);
	     /* transform: translate(-50% ,-50%); */
}
.tag{
	font-size: 24rpx;
	width:150rpx;
	background-image: linear-gradient(to bottom right, #ffa810, #ff7433);
	border-radius: 10rpx;
	color:#ffffff;
	padding:4rpx 6rpx;
	margin-top: 4rpx;
	/* margin-right: 10rpx; */
	display: flex;
	justify-content: left;
}
.tag-btns-icon{
	width:36rpx;
	height:36rpx;
	margin-right: 8rpx;
}
.tui-product-btn{
	position: absolute;right:0rpx;
	border-radius: 40rpx;
	/* background:#ff3e2b; */
	background-image: linear-gradient(to bottom right, #ff7433, #ff3e2b);
	color:#fff;
	font-size: 24rpx;
	bottom:60rpx;
	padding:10rpx 16rpx;
}
.nav-title {
		color: #000;
		position: absolute;
		font-size: 16px;
		/* font-weight: 600; */
		top: 13px;
		left: 50%;
		line-height: 17px;
		margin-left: -34px;
	}
	.item-locat-info{
		display: flex;
		justify-self: left;
	}
	.item-locat-info-icon{
		width:30rpx;
		height: 30rpx;
		margin-top: 10rpx;
		margin-right: 4rpx;
		
	}
	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
	
	.tui-goods-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}
	.item-locat-info-km{
		line-height: 50rpx;
		color:#c3c5c5;
		padding-left: 4rpx;
	}
.store-header{
		display: flex;
		justify-content: left;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #f8f8f8;
}
.tui-goods-item {
		display: flex;
		position: relative;
		padding: 6rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}
.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
	}

	.tui-goods-info {
		width: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}
	.tui-goods-stock{
		font-size: 24rpx;
		color: #aaaaaa;
	}
	.tui-goods-desc{
		font-size: 24rpx;
		color: #777;
	}

	.tui-goods-model {
		max-width: 100%;
		color: #333;
		background: #F5F5F5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		box-sizing: border-box;
	}
.store-avatar{
	width:130rpx;
	border-radius: 4rpx;
	height:130rpx;
}
.store-box{
	display: flex;
	margin-top:20rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #f8f8f8;
	font-size: 24rpx;
	justify-content: left;
}
.store-address{
	margin-top:20rpx;
	/* padding-top: 10rpx; */

	font-size: 24rpx;
}
.tui-content-box {
		width: 100%;
		padding: 0 30rpx;
		margin-top: -180rpx;
		display: block;
		box-sizing: border-box;
		position: relative;
		border-radius: 20rpx;
	}
	.tui-content-boxs{
		width: 100%;
		padding: 0 30rpx;
		margin-top: 60rpx;
		display: block;
		box-sizing: border-box;
		position: relative;
		border-radius: 20rpx;
	}
	.tui-order-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tui-tool-text {
		font-size: 26rpx;
	}
	
	.tui-order-icon {
		width: 60rpx;
		height: 60rpx;
		display: block;
	}
	.tui-order-box {
		/* height: 208rpx; */
		margin-bottom: 20rpx;
	}
.store-box-list{
	text-align: center;
}
.store-box-list-number{
	font-size:34rpx;
	
	line-height:60rpx;
	color:#fff;
}
.store-box-list-text{
	color:#fff
}
.tui-tool-box{
	margin-top: -60rpx;
	padding:26rpx;
	background: #fff;
	border-radius: 20rpx;
}
.tui-order-list {
		width: 100%;
		height: 134rpx;
		/* padding: 0 30rpx; */
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}
	.yui-store-list {
			width: 100%;
			padding: 30rpx 50rpx 0 50rpx;
			text-align: center;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	.tui-box{
		background: #fff;
		border-radius: 16rpx;
		padding:20rpx 20rpx;
		
	}
	.yui-store-box{
		background: #fff;
		border-radius: 20rpx;
		padding:26rpx 0;
	}
	.tui-cell-title {
		font-size: 28rpx;
		line-height: 30rpx;
		padding-top: 0rpx;
		padding-left: 30rpx;
		font-weight: 600;
		color: #333;
	}
	.yui-store-list-text{
		font-size: 26rpx;
		color:#a6a6a6;
		line-height: 50rpx;
	}
.tui-icon-box{
	margin-bottom: 20rpx;
}
.store-avatar-img{
	width:100%;
	display: block;
	height:130rpx;
	border-radius: 10rpx;
	
}
.store-name{
	margin-left: 20rpx;
	width:76%;
}
.store-store-name{
	font-size: 32rpx;
	margin-top: 6rpx;
	font-weight: bold;
}
.store-store-des{
	font-size: 24rpx;
	color:#acacac;
	margin-top: 8rpx;
	white-space: nowrap;
	overflow: hidden;
	width:100%;
	text-overflow: ellipsis;
}
</style>
